<template>
  <a-card>
    <div id="main" style="height: 400px;width:100%;"></div>
  </a-card>
</template>
<script setup lang="ts">
const dashboardState = useStore.dashboardState()
import * as echarts from 'echarts';
let myChart = null
const handleLoadChart = ()=>{
  nextTick(()=>{
    // 基于准备好的dom，初始化echarts实例
    var myChart  = echarts.init(document.getElementById('main'));
    myChart.setOption({
      title: {
        text: '销售额'
      },
      tooltip: {},
      xAxis: {
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [51, 20, 136, 10, 10, 20,10, 120,118, 120,110, 20]
        }
      ]
    });
    myChart.on('click', function(params) {
      // 控制台打印数据的名称
      alert(params.name);
    });

    window.addEventListener('resize', function() {
      myChart.resize();
    });
  })
}

watch(()=>dashboardState.expand,(nval)=>{
  myChart.resize();
})

onMounted(()=>{
  handleLoadChart()
})
</script>
<style scoped lang="scss"></style>